<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户模块案例</title>
</head>
<body>
    <div id="app">
        <div alignt="center">
            <h3 alignt="center">用户新增</h3><br>
            <p>
                用户名称: <input type="text" name="name" v-model="addUser.name"/>
                用户年龄: <input type="text" name="age"  v-model="addUser.age"/>
                用户性别: <input type="text" name="sex"  v-model="addUser.sex"/>
                <button @click="addUserBtn">新增</button>
            </p>
        </div>
        <hr />
        <div alignt="center">
            <h3 alignt="center">用户修改操作</h3><br>
            <p>
                    用户ID号: <input type="text" name="id"  v-model="updateUser.id" disabled/>
                    用户名称: <input type="text" name="name" v-model="updateUser.name"/>
                    用户年龄: <input type="text" name="age"  v-model="updateUser.age"/>
                    用户性别: <input type="text" name="sex"  v-model="updateUser.sex"/>
                    <button @click="updateUserBtn">修改</button>
            </p>
        </div>
        <h1 alignt="center">用户列表展现案例</h1>
        <table alignt="center" border="1px" width="80%">
            <tr alignt="center">
                <td>ID编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <!-- 遍历tr标签 展现数据 -->
            <tr alignt="center" v-for="user in userList">
                <td v-text="user.id"></td>
                <td v-text="user.name"></td>
                <td v-text="user.age"></td>
                <td v-text="user.sex"></td>
                <td>
                    <button @click="updateClick(user)">修改</button>
                    <button @click="deleteUser(user)">删除</button>
                </td>
            </tr>
        </table>
    </div>
    
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
    <script>
        axios.defaults.baseURL = "http://localhost:8090"
        const app = new Vue({
            el:"#app",
            data:{
                userList:[],
                addUser:{
                    id:null,
                    name:'',
                    age:'',
                    sex:''
                },
                updateUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
            },
            methods:{
                 async findUserList(){
                    let {data: result} = await axios.get("/axios/findUserList")
                    this.userList = result
                },


                //实现用户数据的入库操作  this.addUser 传递封装的对象
                async addUserBtn(){
                    let {data:result,status: status} = await axios.post("/axios/saveUser",this.addUser)
                    if(status === 200){
                        alert(result)
                        //1.清空用户文本输入框,需要传如一个空对象，实现双向数据绑定
                        this.addUser = {}
                        //2.刷新用户列表
                        this.findUserList()
                    }else{
                        alert("用户新增失败！！！")
                    }
                },


                updateClick(user){
                    this.updateUser = user
                },
                async updateUserBtn(){
                    let {data:result} = await axios.put("/axios/updateUser",this.updateUser)
                    alert(result)
					this.updateUser = {}
					this.findUserList() 
                },


                async deleteUser(user){
                    let {data:result} = await axios.delete("/axios/deleteUser?id="+user.id)
                    alert(result)
					//重新查询列表数据
					this.findUserList()
                }				
            },
            mounted(){
					//页面初始化完成之后调用
					this.findUserList()
				} 

        })
    </script>
    
</body>
</html>